/*
 * @Description:
 * @Author: huangmin
 * @Email: 812949176@qq.com
 * @Date: 2022-02-16 17:05:22
 * @LastEditors: huangmin
 * @LastEditTime: 2022-02-28 16:15:07
 * @FilePath: \jiulipu_penguin\src\components\Navbar\index.jsx
 */
/* eslint-disable no-unused-vars */
import React, { memo, useState, useEffect } from "react";
import { Icon } from "@antmjs/vantui";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useSelector, useDispatch, shallowEqual } from "react-redux";
import { updateState } from "@/store/actions/global";
import "./index.less";

const Index = (props) => {
    const { title, arrow, onClickArrow } = props;
    const goHome = () => {
        Taro.switchTab({
            url: '/pages/index/index'
        })
    }
    const goBack = () => {
        Taro.navigateBack(
            {
                fail: () => {
                    goHome();
                }
            }
        );
    }
    const [data, setData] = useState({
        height: 0,
        padding: 0,
        menuGap: 0,
        menuButtonObject: {}
    })
    const handleClick = async (type) => {
        if (onClickArrow) {
            await onClickArrow();
        }
        if (type === -1) {
            goBack()
        } else if (type === 0) {
            goHome()
        }
    }
    useEffect(() => {
        const { statusBarHeight, windowWidth } = Taro.getSystemInfoSync();
        const menuButtonObject = Taro.getMenuButtonBoundingClientRect();
        const { top, height, right } = menuButtonObject;
        const gap = top - statusBarHeight;
        const navBarHeight = height + gap * 2;
        const menuGap = windowWidth - right;
        // 计算状态栏与导航栏的总高度
        const statusNavBarHeight = statusBarHeight + navBarHeight;
        setData({
            height: statusNavBarHeight,
            padding: `${top}px 0 ${gap}px 0`,
            menuButtonObject,
            menuGap
        })
    }, []);
    const { menuButtonObject, height, padding, menuGap } = data;
    const { width: menuWidth, height: menuHeight } = menuButtonObject;
    return (
        <View className='navbar'>
            <View className='block' style={{ height: height }}></View>
            <View className='main' style={{ height: height, padding: padding }}>
                <View className='title'>{title}</View>
                {arrow ? <View className='arrow' style={{ height: menuHeight, width: menuWidth, left: menuGap }}>
                    <Icon name='arrow-left' color='#333333' size='40' onClick={() => handleClick(-1)}></Icon>
                    <View className='line'></View>
                    <Icon name='wap-home' color='#333333' size='40' onClick={() => handleClick(0)}></Icon>
                </View> : null}
            </View>
        </View>
    );
};

export default memo(Index);
